<template>
    <div id="indexUsers">
        <!-- 头部搜索框 -->
        <el-card style="margin-bottom:20px;">
            <el-input @keydown.enter.native="getClasses" placeholder="请输入内容" v-model="fieldVal">
                <el-select v-model="field" style="width:100px"  slot="prepend" placeholder="请选择">
                    <el-option label="班级名" value="class_name"></el-option>
                </el-select>
                <el-button @click="getClasses" slot="append" icon="el-icon-search"></el-button>
            </el-input>
        </el-card>
        <el-card slot="header">
            <span>班级管理</span>
            <el-button type="primary" @click="dlVisible=true;getClasses">+创建新班级</el-button>
            <el-table :data="classes" v-loading="loading">
                <el-table-column prop="id" width="80" label="编号">
                </el-table-column>
                <el-table-column prop="class_name" width="150" label="班级名" align="center">
                </el-table-column>
                 <el-table-column  label="操作" align="center">
                     <div slot-scope="{row}">
                         <el-button type="primary" @click.stop="edlVisible=true,eformClasses=row" icon="el-icon-edit">编辑</el-button>
                         <el-button @click="del(row.id)" type="danger" icon="el-icon-cancel">删除</el-button>
                     </div>
                </el-table-column>
            </el-table>
            <div style="margin-top:20px">
                <el-pagination background layout="sizes,prev, pager, next" :total="total" :page-size="pageSize" 
                :page-sizes="[5,10,20,50]"
                @size-change="sizeChange"
                :current-page.sync="currentPage" @current-change="getClasses">
                </el-pagination>
            </div>
        </el-card>

        <!-- 点击添加节点按钮出现的页面 -->
        <el-dialog
          title="添加班级"
          :visible="dlVisible"
          width="40%"
          @close="cancel"> 
          <el-form :model="formClasses" ref="formClasses" label-width="120px" :rules="rules" >
            <el-form-item label="编号" prop="id">
            <el-input v-model="formClasses.id"></el-input>
            </el-form-item>
            <el-form-item label="名称" prop="class_name" >
            <el-input v-model="formClasses.class_name"></el-input>
            </el-form-item>
            <el-form-item label="是否显示到导航" prop="status">
            <el-select v-model="formClasses.status" placeholder="">
                <el-option label="显示" value="1" checked> </el-option>
                <el-option label="不显示" value="0"></el-option>
            </el-select> 
            </el-form-item>
          </el-form>
          <span slot="footer">
            <el-button @click="cancel">取 消</el-button>
            <el-button type="primary" @click="add">确 定</el-button>
          </span>
        </el-dialog>

        <!-- 点击编辑节点按钮出现的页面 -->
        <el-dialog
          title="编辑班级"
          :visible="edlVisible"
          width="40%"
          @close="ecancel"> 
          <el-form :model="eformClasses" ref="eformClasses" label-width="120px" :rules="rules" >
            <el-form-item label="编号" prop="id">
            <el-input v-model="eformClasses.id"></el-input>
            </el-form-item>
            <el-form-item label="名称" prop="class_name" >
            <el-input v-model="eformClasses.class_name"></el-input>
            </el-form-item>
            <el-form-item label="是否显示到导航" prop="status">
            <el-select v-model="eformClasses.status" placeholder="">
                <el-option label="显示" value="1" checked> </el-option>
                <el-option label="不显示" value="0"></el-option>
            </el-select> 
            </el-form-item>
          </el-form>
          <span slot="footer">
            <el-button @click="ecancel">取 消</el-button>
            <el-button type="primary" @click="edit">确 定</el-button>
          </span>
        </el-dialog>
    </div>
</template>
<script>
export default {
  data() {
    return {
      dlVisible: false,
      edlVisible: false,
      field: "",
      fieldVal: "",
      loading: false,
      currentPage: 1,
      pageSize: 5,
      classes: [],
      total: 0,
      formClasses: {
        parent_id: "",
        class_name: "",
        status: "1"
      },
      eformClasses: {
        id: "",
        class_name: "",
        status: "1"
      },
       rules: {
        class_name: [
          {
            validator: (rule, val, callback) => {
              this.axios.get(`/classes/exists/class_name/${val}`).then(ret => {
                if (ret.data == true) {
                  callback(new Error("该名称已被注册"));
                } else {
                  callback();
                }
              });
            },
            trigger: "change"
          }
        ]
      }
    };
  },
  created() {
    this.getClasses();
  },
  methods: {
      //编辑
      edit(){
      this.axios.put(`/classes/edit/${this.eformClasses.id}`,{
        class_name:this.eformClasses.class_name,
        status:this.eformClasses.status
      }).then(()=>{
        this.$message.success("编辑成功");
        this.edlVisible = false;
        this.$refs.eformClasses.resetFields();
        this.getClasses();
      })
    },
       //添加
    add() {
      this.axios.post("/classes/add", this.formClasses).then(() => {
        this.$message.success("添加成功");
        this.dlVisible = false;
        this.$refs.formClasses.resetFields();
        this.getClasses();
      });
    },
    //编辑里面的取消
    ecancel() {
      this.edlVisible = false;
      this.$refs.eformClasses.resetFields();
    },
    //添加里面的取消
    cancel() {
      this.dlVisible = false;
      this.$refs.formClasses.resetFields();
    },
    //改变页码
    sizeChange(size) {
      this.pageSize = size;
      this.getClasses();
    },
    //删除
    del(id) {
      this.$confirm("此操作将永久删除，是否继续？", "提示").then(() => {
        this.axios
          .delete(`/classes/del/${id}`)
          .then(() => {
            this.$message.success("删除成功");
            this.getClasses();
          })
          .catch(() => {
            this.$message.error("删除失败");
          });
      });
    },
    //获取
    getClasses() {
      this.loading = true;
      this.axios
        .get("/classes", {
          params: {
            currentPage: this.currentPage,
            pageSize: this.pageSize,
            field: this.field,
            fieldVal: this.fieldVal
          }
        })
        .then(res => {
          this.loading = false;
          this.classes = res.data.rows;
          this.total = res.data.total;
          this.pageSize = res.data.pageSize;
          this.currentPage = res.data.currentPage;
        })
        .catch(() => {});
    }
  }
};
</script>

